<template>
	<div class="resource_lib_wrapper">
		<div class="resource_lib_button">
			<div class="button">
				<el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddLibrary">创建库</el-button>
			</div>
			<el-form size="small" inline>
				<el-form-item label="库分类">
					<el-select v-model="checkedType" placeholder="请选择">
						<el-option v-for="(item, index) in libraryTypeData" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入库名称" v-model="queryData.name">
						<el-button slot="append" icon="el-icon-search" @click="getLibraryListData"></el-button>
					</el-input>
				</el-form-item>
			</el-form>
			<show-mode size="32" v-model="showType"></show-mode>
		</div>
		<div class="resource_lib_list" v-loading="loading">
			<component :is="libraryShowComp" :data="libraryList" @edit="handleEditLibrary" @look="handleLookDetail" @refresh="getLibraryListData"></component>
		</div>
		<sw-pagination :total="dataCount" :page-sizes="queryPages" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="getLibraryListData"></sw-pagination>
		<library-form v-model="libraryDialog" :lib-data="libraryData" @refresh="getLibraryListData"></library-form>
	</div>
</template>

<script>
import libraryForm from './form';
import imageText from './imageText';
import tableShow from './tableShow';
import { getLibraryList } from '@/api/data/tbNetDiskDir';
export default {
	components: { imageText, tableShow, libraryForm },
	inject: ['libraryTypes'],
	data() {
		return {
			loading: false,
			checkedType: '',
			queryData: {
				page: 1,
				limit: 60,
				type: '1',
				name: ''
			},
			queryPages: [60, 120, 240],
			showType: '1',
			dataCount: 0,
			libraryList: [],
			responsive: {},
			libraryDialog: false,
			libraryData: {}
		};
	},
	computed: {
		libraryShowComp() {
			let type = this.showType;
			if (type === '1') {
				return 'imageText';
			}
			if (type === '2') {
				return 'tableShow';
			}
		},
		libraryTypeData() {
			return this.libraryTypes();
		}
	},
	watch: {
		async checkedType(val) {
			this.loading = true;
			await this.getLibraryListData();
		},
		libraryTypeData: {
			handler(arr) {
				if (arr.length === 0) return false;
				this.checkedType = arr[0].id;
			},
			immediate: true
		}
	},
	methods: {
		//获取资源库列表
		async getLibraryListData() {
			let params = { ...this.queryData, libraryId: this.checkedType };
			let result = await getLibraryList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.libraryList = result.data || [];
			}
		},

		//新增库
		handleAddLibrary() {
			this.libraryData = { type: 'add' };
			this.libraryDialog = true;
		},

		//编辑库
		handleEditLibrary(data) {
			this.libraryData = { type: 'edit', data };
			this.libraryDialog = true;
		},

		//查看库
		handleLookDetail(data) {
			this.libraryData = { type: 'look', data };
			this.libraryDialog = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.resource_lib_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
	.sw-pagination {
		margin-top: 16px;
	}
}
.resource_lib_button ::v-deep {
	display: flex;
	align-items: center;
	.button {
		margin-right: 20px;
		padding-right: 20px;
		border-right: solid 1px #eef1f5;
	}
	.el-form {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		overflow: hidden;
	}
	.el-form-item {
		margin: 0;
	}
	.el-form-item__content {
		line-height: 1;
	}
	.el-input-group {
		width: 240px;
	}
	.el-radio-group {
		margin-left: 20px;
	}
}
.resource_lib_list {
	flex: 1;
	overflow: hidden;
	overflow-y: auto;
	margin-top: 16px;
}
</style>
